<template>
  <!-- 热门课程、系列题库样式 -->
  <a class="item-box" :href="href ? href : `/exercises_details/all-${itemInfo.id}.html`" :title="itemInfo.name">
    <div class="img">
      <el-image :src="itemInfo.exerciseImgs && itemInfo.exerciseImgs.length > 0 ? itemInfo.exerciseImgs[0] : ''" :alt="itemInfo.name" fit="cover" class="imgs" />
      <!-- <div class="img-title">{{ itemInfo.name }}</div> -->
    </div>
    <div class="words">{{ itemInfo.name }}</div>
  </a>
</template>

<script setup>
const props = defineProps({
  itemInfo: {
    type: Object,
    default: {}
  },
  href: {
    type: String,
    default: ''
  }
})
</script>

<style lang="less" scoped>
// 单行文本超出省略号
.overText(@max-width) {
  max-width: @max-width;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文本超出省略
.overTexts(@line-count, @width, @line-height, @font-size) {
  display: -webkit-box;
  -webkit-line-clamp: @line-count;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: @width;
  line-height: @line-height;
  font-size: @font-size;
}

.item-box {
  width: 285px;
  // height: 240px;
  // position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 10px;
  cursor: pointer;

  &:hover .words {
    color: #FF3F29;
  }

  .img {
    position: relative;
    width: 285px;
    height: 165px;
    border-radius: 10px;
    overflow: hidden;

    .img-title {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      z-index: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
      height: 36px;
      line-height: 36px;
      background-color: rgba(0, 0, 0, .4);
      color: #fff;
      font-size: 14px;
      padding: 0 20px;
      text-align: center;
    }

    .imgs {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      transition: transform 0.3s linear;
    }
  }

  &:hover>.img>.imgs {
    transform: scale(1.2);
  }

  .tag {
    width: 25px;
    height: 45px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 0;
    left: 24px;
  }

  .taga {
    background-color: #FF9000;
  }

  .tagb {
    background-color: #405FE7;
  }

  .title {
    width: 180px;
    height: 44px;
    padding: 8px 52px;
    position: absolute;
    top: 53px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
  }

  .words {
    color: #666;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
  }
}
</style>